<template>
    <dv-border-box1>
        <div class="title">物联网预警消除时间</div>
        <veEcharts :option="option" :on-mouseclick="showTableList" />
        <el-dialog :fullscreen="fullscreen" title="警情日报详情" v-model="visible" width="1200px">
            <div class="avue-crud__dialog__menu">
                <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
            </div>
            <el-form :model="search" inline size="default">
                <el-form-item label="名称">
                    <el-input v-model="search.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="设备编号">
                    <el-input v-model="search.device_no" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList" size="default">搜索</el-button>
                    <el-button type="warning" @click="reset" size="default">重置</el-button>
                    <el-button type="success" @click="onDownExcel" size="default">导出</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="list" height="450">
                <el-table-column label="序号" type="index" width="120"></el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="设备编号" prop="device_no"></el-table-column>
                <el-table-column label="类型">
                    <template #default="scope">
                        <span> {{ ['', '正常', '预警', '故障', '停用', '报警', '离线'][scope.row.status] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="事件描述" prop="device_remark"> </el-table-column>
                <el-table-column label="处理时间(天)" prop="process_time"></el-table-column>
            </el-table>
        </el-dialog>
    </dv-border-box1>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import veEcharts from './veEcharts.vue'
import { mockMonths } from '@/util/utils'
import dayjs from 'dayjs'
import { thingWarning, pcIndexIOTList, pcIndexIOTExport } from '@/api/dashboard'
const visible = ref(false)
const day = ref('')
const list = ref([])
let fullscreen = ref(false)
const search = reactive({
    name: '',
    device_no: '',
    sta_time: ''
})
const option = reactive({
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0,0,0, 0.5)',
        textStyle: {
            color: '#fff',
            fontFamily: 'myFont'
        }
    },
    color: ['#3f90ff'],
    legend: {
        show: true,
        icon: 'roundRect',
        textStyle: {
            color: '#fff',
            fontSize: 11,
            padding: [0, 0, 0, 0],
            fontFamily: 'myFont'
        }
    },
    grid: {
        top: '24%',
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgb(41,188,245)'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                    fontFamily: 'myFont'
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#233653'
                }
            },
            axisTick: {
                show: false
            },
            data: mockMonths(6)
        }
    ],
    dataZoom: {
        show: true,
        type: 'inside',
        start: 1,
        end: 60
    },
    yAxis: [
        {
            name: '时间(天)',
            nameTextStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 0, 0, 0]
            },
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#1160a0',
                    type: 'dashed'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#008de7'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            axisTick: {
                show: false
            }
        }
    ],
    series: [
        // {
        //     name: '火灾自动报警',
        //     type: 'bar',
        //     barWidth: 10,
        //     itemStyle: {
        //         color: '#5B8FF9'
        //     },
        //     data: []
        // },
        {
            name: '喷水灭火',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                color: '#6DC8EC'
            },
            data: []
        },
        {
            name: '电气监控',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                color: '#5AD8A6'
            },
            data: []
        },
        {
            name: '水池水箱',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                color: '#ff665e'
            },
            data: []
        },
        {
            name: '室内消火栓',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                color: '#a45fdc'
            },
            data: []
        }
    ]
})
thingWarning().then((res) => {
    res.data.forEach((item) => {
        option.series[0].data.push(item.fireAuto)
        option.series[1].data.push(item.waterSpray)
        option.series[2].data.push(item.electrical)
        option.series[3].data.push(item.pool)
        // option.series[4].data.push(item.fireHydrant)
    })
})
const showTableList = (e) => {
    visible.value = true
    day.value = e.name.replace('年', '-').replace('月', '')
    search.sta_time = day.value
    getList()
}
const reset = () => {
    search.name = ''
    search.device_no = ''
    getList()
}
const getList = async () => {
    const { data } = await pcIndexIOTList(search)
    list.value = data
}
const onDownExcel = () => {
    pcIndexIOTExport({ sta_time: day.value, ...search }).then((res) => {
        const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
        })
        if (window.navigator.msSaveOrOpenBlob) {
            //兼容IE10
            navigator.msSaveBlob(blob, '导出文件.xlsx')
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = '导出文件.xlsx' //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
    })
}
</script>

<style lang="scss" scoped>
.dv-border-box-1 {
    font-size: 14px;

    .title {
        color: #edf4ff;
        height: 20px;
        font-family: 'myFont';
        font-size: 20px;
    }

    .tag-wrap {
        display: flex;
        justify-content: end;
        padding: 10px 15px 0;

        .tag {
            background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 280%);
            border: 1px solid #1f99c7;
            border-radius: 10px;
            color: #1f99c7;
            font-size: 12px;
            padding: 2px 4px;
            margin-right: 15px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                color: #2989f8;
                box-shadow: 0 0 10px rgb(0, 140, 255);
            }
        }

        .active {
            color: #2989f8;
            box-shadow: 0 0 10px rgb(0, 140, 255);
        }
    }

    .line {
        width: 100%;
        height: 300px;
    }
}
</style>
